<template>
	<view>
		<!-- 头部 -->
		<view class="top">修改密码</view>
		<view class="box">
			<view class="phone">当前手机号：{{ phoneNum }}</view>
			<view class="list">
				<view class="item">
					<view class="input">
						<input @blur="pwdSchema" type="text" v-model="pwd_data.old_pwd" placeholder="原密码" />
					</view>
				</view>
				<view class="item">
					<view class="input">
						<input type="text" v-model="pwd_data.new_pwd" placeholder="确认新密码" />
					</view>
				</view>
				<view class="item acea-row row-between-wrapper">
					<view class="codeIput">
						<input class="codeNum" type="text" v-model="pwd_data.code" placeholder="请输入验证码" />
					</view>
					<view class="code font-num" @click="getPwdCode">
						{{getCode=="1"?'获取验证码': getCode==2?"获取验证码":changeCode+'s后可重发' }}
					</view>
				</view>
			</view>
			<view class="btn" @click="btnupdatePwd">确认修改</view>
		</view>
	</view>
</template>

<script>
	// 导入api文件
	import api from "../../../api/api.js";
	// 导入pinia
	import {
		useUserStore
	} from "../../../store/users.js";
	const userStore = useUserStore();
	export default {
		data() {
			return {
				user: "",
				phone: "",
				pwd_data: {
					old_pwd: "", // 旧密码
					new_pwd: "", // 新密码
					code: "" // 验证码
				},
				getCode: "1", // 控制文字显示隐藏
				changeCode: 60, // 倒计时时间
				changeCodeFlag: false, // 节流值
			}
		},
		methods: {
			// 验证码密码正则
			pwdSchema() {
				const regPwd = /^[a-z0-9]{6,16}$/; // 密码正则
				// 验证密码
				if (!regPwd.test(this.pwd_data.old_pwd)) {
					uni.$showMsg("密码格式错误");
					return false;
				}
				return true;
			},
			// 获取登录用户信息
			getUserInfo() {
				api.getUserInfo().then(res => {
					// 获取失败
					if (res.data.status != 200) {
						// 提示信息
						uni.$showMsg(res.data.data.err)
						// 1.8秒跳转登录页面
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/user/login/login",
							})
						}, 1800);
						return;
					}
					// 获取成功
					this.user = res.data.data.user;
					this.phone = this.user.phone;
					uni.$showMsg(res.data.msg);
				});
			},
			// 倒计时函数
			countTime() {
				if (this.changeCodeFlag) return // 默认值false 第一次不return
				// 调用发送验证码api
				this.sendUpdatePwdCode();
				// 改为true 计时不结束一直return
				this.changeCodeFlag = true;
				this.getCode = "3";
				// 定义定时器 方便清除
				let timer = setInterval(() => {
					// 倒计时数字 每秒自减1 
					this.changeCode--;
					// 每次自减一 再赋值给它本身
					this.changeCode = this.changeCode;
					// 判断 显示为0s时 结束定时器 将'重新获取'显示出来 将节流值改为false 将倒计时复原
					if (this.changeCode === -1) {
						clearInterval(timer);
						this.getCode = "2";
						this.changeCode = 5;
						this.changeCodeFlag = false;
					}
				}, 1000);
			},
			// 发送更改验证码api
			sendUpdatePwdCode() {
				api.sendPwd(this.user.phone).then(res => {
					// 发送失败
					if (res.data.status != 200) return uni.$showMsg(res.data.data.err);
					// 发送成功
					uni.$showMsg(res.data.msg);
				})
			},
			// 获取验证码
			getPwdCode() {
				if (this.pwd_data.old_pwd != "" || this.pwd_data.new_pwd != "") {
					this.countTime();
				} else {
					uni.$showMsg("密码格式错误");
				}
			},
			// 确认修改
			btnupdatePwd() {
				api.updatePwd(this.pwd_data).then(res => {
					// 修改失败
					if (res.data.status != 200) return uni.$showMsg(res.data.data.err);
					// 修改成功
					uni.$showMsg(res.data.msg);
					// 清空token
					userStore.clearToken();
					// 1.8秒跳转登录页面
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/user/login/login",
						})
					}, 1800);
				})
			},
		},
		onLoad() {
			// 获取登录用户信息
			this.getUserInfo();
			// 设置修改密码页面title
			uni.setNavigationBarTitle({
				title: "修改密码"
			});
		},
		computed: {
			phoneNum() {
				// 将手机号脱敏
				return this.phone.substring(0, 3) + "****" + this.phone.substring(7);
			}
		}
	}
</script>

<style>
	/* 头部 */
	.top {
		width: 100%;
		height: 100rpx;
		background-color: white;
		line-height: 100rpx;
		text-align: center;
	}

	.box {
		width: 650rpx;
		height: 700rpx;
		margin: 30rpx auto;
		background-color: white;
		border-radius: 8px;
	}

	.box .phone {
		font-size: 17px;
		font-weight: 700;
		text-align: center;
		padding-top: 29px;
	}

	.box .list {
		width: 500rpx;
		margin: 28px auto 0 auto;
	}

	.box .list .item {
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
	}

	.box .list .item .input input {
		padding: 10rpx 0 0 0;
		font-size: 12px;
	}

	.acea-row {
		justify-content: space-between;
	}

	.codeNum {
		font-size: 12px;
		width: 150rpx;
	}

	.box .list .item .code {
		font-size: 14px;
		color: rgba(29, 176, 252, 1);
		background-color: #fff;
	}

	.box .btn {
		width: 500rpx;
		font-size: 17px;
		height: 90rpx;
		color: white;
		border-radius: 24px;
		color: #fff;
		margin: 60rpx auto 0 auto;
		text-align: center;
		line-height: 48px;
		background-color: rgba(29, 176, 252, 1);
	}
</style>